<template>

<div class="login">

<el-form class="login-form" ref="loginForm"
         :rules="loginRules"
         :model="loginForm">

    <h3 class="title">后台管理系统</h3>

    <el-form-item prop="username">
        <el-input v-model="loginForm.username"
            type="text" auto-complete="off" placeholder="账号">
            <svg-icon slot="prefix" icon-class="user" 
                class="el-input__icon input-icon"/>
        </el-input>
    </el-form-item>

    <el-form-item>
        <el-input v-model="loginForm.password"
            type="password" auto-complete="off" placeholder="密码">
            <svg-icon slot="prefix" icon-class="password" 
                class="el-input__icon input-icon"/>
        </el-input>
    </el-form-item>

    <el-form-item>
        <el-input 
            v-model="loginForm.code"
            auto-complete="off" 
            style="width: 63%"
            placeholder="验证码">
            <svg-icon slot="prefix" icon-class="validCode" 
                class="el-input__icon input-icon"/>
        </el-input>

        <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>
    </el-form-item>

    <el-checkbox v-model="loginForm.rememberMe" 
                 style="margin:0px 0px 25px 0px;">
    记住密码
    </el-checkbox>

    <el-form-item style="width:100%">
        <el-button
            size="medium"
            type="primary"
            style="width:100%"
            >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
        </el-button>
    </el-form-item>

</el-form>

    <div class="el-login-footer">
        <span>Copyright © 2018-2020 zhangle All Rights Reserved.</span>
    </div>

</div>

</template>

<script>
import { getCodeImg } from "@/api/login"

export default {
    name: "Login2",
    data() {
        return {
            codeUrl: "",
            loginForm:{
                username: "admin",
                password: "admin123"
            },
            loginRules:{
                username: [
                    { required: true, trigger: "blur", message:"用户名不能为空" }
                ],
            },
            loading: false
        }
    },
    created() {
        console.log('create')
        this.getCode()
    },
    methods: {
        getCode() {
            getCodeImg().then(res => {
                console.log(res)
                this.codeUrl = "data:image/gif;base64," + res.img;
            })
        }
    }
}

</script>

<style rel="stylesheet/scss" lang="scss">

.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../assets/images/login2-background.jpeg");
    background-size: cover;
}

.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
}

.login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
        height: 38px;
        input {
            height: 38px;
        }
    }
    
    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }

}

.login-code {
    width: 33%;
    height: 28px;
    float: right;
    img {
        cursor: pointer;
        vertical-align: middle;
    }
}

.login-code-img {
    height: 38px;
}

.el-login-footer {
    position: fixed;
    bottom: 0;
    height: 40px;
    width: 100%;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-family: Arial; 
    font-size: 12px;
    letter-spacing: 1px;
}

</style>
